<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebRTC demo</title>
    <style>
    button {
        padding: 8px 16px;
    }

    pre {
        overflow-x: hidden;
        overflow-y: auto;
    }

    video {
        margin-top: 30px;
    }

    .images-list {
        display: inline-block;
        float: right;
    }

    .images-list-item {
        position: relative;
    }

    .images-list-item img {
        display: inline-block;
    }

    .images-list-item span {
        position: absolute;
        top: 20px;
        left: 20%;
    }

    .images-list-item input {
        position: absolute;
        top: 40px;
        left: 40%;
    }

    </style>
</head>
<body>
<div>
<button id="start" onclick="WebRTC.start()">Start</button>
<button id="stop" onclick="WebRTC.stop()">Stop</button>
<button id="ping" onclick="sendMessage({type: 'ping'})">Ping</button>
</div>
<div>
    <h2>Options</h2>
    <form id="options-form">
        <label for="camera_type">Camera Type:</label>
        <select name="camera_type" id="camera_type" onchange="selectCamera(this);">
            <option value="rgb" selected>RGB Camera</option>
            <option value="depth">Depth</option>
        </select>
        <div id="rgb_camera_options">
            <label for="cam_width">Cam width: </label>
            <input id="cam_width" name="cam_width" type="number" value="300"/>
            <label for="cam_height">Cam height: </label>
            <input id="cam_height" name="cam_height" type="number" value="300"/>
            <label for="nn_model">Neural Network</label>
            <select name="nn_model" id="nn_model">
                <option value="">--</option>
                <option value="age-gender-recognition-retail-0013">age-gender-recognition-retail-0013</option>
                <option value="face-detection-adas-0001">face-detection-adas-0001</option>
                <option value="face-detection-retail-0004">face-detection-retail-0004</option>
                <option value="mobilenet-ssd">mobilenet-ssd</option>
                <option value="pedestrian-and-vehicle-detector-adas-0001">pedestrian-and-vehicle-detector-adas-0001</option>
                <option value="pedestrian-detection-adas-0002">pedestrian-detection-adas-0002</option>
                <option value="person-detection-retail-0013">person-detection-retail-0013</option>
                <option value="person-vehicle-bike-detection-crossroad-1016">person-vehicle-bike-detection-crossroad-1016</option>
                <option value="vehicle-detection-adas-0002">vehicle-detection-adas-0002</option>
                <option value="vehicle-license-plate-detection-barrier-0106">vehicle-license-plate-detection-barrier-0106</option>
            </select>
        </div>
        <div id="depth_options" style="display: none;">
            <label for="mono_camera_resolution">Mono Camera Resolution</label>
            <select name="mono_camera_resolution" id="mono_camera_resolution">
                <option value="THE_400_P" selected>THE_400_P</option>
                <option value="THE_720_P">THE_720_P</option>
                <option value="THE_800_P">THE_800_P</option>
            </select>
            <label for="median_filter">Median Filter</label>
            <select name="median_filter" id="median_filter">
                <option value="MEDIAN_OFF">MEDIAN_OFF</option>
                <option value="KERNEL_3x3">KERNEL_3x3</option>
                <option value="KERNEL_5x5">KERNEL_5x5</option>
                <option value="KERNEL_7x7" selected>KERNEL_7x7</option>
            </select>
            <input type="checkbox" name="subpixel" value="on">
            <label for="subpixel">Subpixel</label>
            <input type="checkbox" name="extended_disparity" value="on">
            <label for="extended_disparity">Extended disparity</label>
        </div>
    </form>
</div>

<video id="video" autoplay="true" playsinline="true"></video>
<script>
function sendMessage(msg) {
  WebRTC.dataChannel.send(encodeURIComponent(JSON.stringify(msg)));
}

function selectCamera(select) {
    if (select.value == "rgb") {
        document.getElementById("rgb_camera_options").style.display = "block";
        document.getElementById("depth_options").style.display = "none";
    } else {
        document.getElementById("rgb_camera_options").style.display ="none";
        document.getElementById("depth_options").style.display = "block";
    }
}
</script>
<script src="client.js"></script>
</body>
</html>